<template>
	<view class="shop-container">
		<!-- 顶部装饰区域 -->
		<view class="shop-header">
			<view class="header-content">
				<view class="header-title">
					<text class="main-title">商城精选</text>
					<text class="sub-title">SELECTED PRODUCTS</text>
				</view>
				<view class="header-stats">
					<view class="stat-item">
						<text class="num">{{ shopProductsList.length }}</text>
						<text class="label">商品数量</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 分类选项卡 -->
		<scroll-view scroll-x class="category-scroll" :show-scrollbar="false">
			<view class="category-list">
				<view class="category-item" :class="{ active: currentType === '' }" @tap="switchType('')"> 全部 </view>
				<view v-for="type in productTypes" :key="type" class="category-item" :class="{ active: currentType === type }" @tap="switchType(type)">
					{{ type }}
				</view>
			</view>
		</scroll-view>

		<!-- 商品网格区域 -->
		<view class="products-grid">
			<view @click="goShowDetail(item)" v-for="(item, index) in filteredProducts" :key="index" class="product-item">
				<view class="product-card">
					<view class="image-wrapper">
						<image :src="config.baseUrl + item.coverUrl" class="product-image" @tap="previewImage(item.coverUrl)" mode="aspectFill" />
						<view class="product-tag" v-if="item.isActive">热销</view>
					</view>
					<view class="product-info">
						<text class="product-name">{{ item.productName }}</text>
						<view class="price-row">
							<text class="price">{{ item.price }}</text>
							<text class="stock-info">库存: {{ item.stock }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getShopProductsList } from "@/api/system/shop";
import config from "@/config.js";
export default {
	data() {
		return {
			shopProductsList: [],
			config,
			currentType: "", // 当前选中的分类
			productTypes: [] // 商品类型列表
		};
	},
	computed: {
		filteredProducts() {
			if (!this.currentType) {
				return this.shopProductsList;
			}
			return this.shopProductsList.filter((item) => item.type === this.currentType);
		}
	},
	onLoad() {
		this.getShopProductsList();
	},
	methods: {
		async getShopProductsList() {
			const res = await getShopProductsList();
			console.log(res.data);
			this.shopProductsList = res.data.records;
			// 提取所有商品类型
			this.productTypes = [...new Set(this.shopProductsList.map((item) => item.type))];
		},
		previewImage(url) {
			uni.previewImage({
				urls: [this.config.baseUrl + url],
				current: 0,
				indicator: "number",
				loop: false
			});
		},
		switchType(type) {
			this.currentType = type;
		},

		goShowDetail(item) {
			uni.setStorageSync("shopProduct", JSON.stringify(item));
			uni.navigateTo({
				url: "/pages/shopDetail/shopDetail?id=" + item.id
			});

			
		}
	}
};
</script>

<style lang="scss">
.shop-container {
	min-height: 100vh;
	background: linear-gradient(to bottom, #f8f8f8, #fff);
	padding-bottom: 40rpx;

	.shop-header {
		padding: 40rpx 30rpx;
		background: linear-gradient(135deg, #4caf50, #45a049);
		margin-bottom: 30rpx;
		position: relative;
		overflow: hidden;

		&::after {
			content: "";
			position: absolute;
			right: -20%;
			top: -50%;
			width: 60%;
			height: 200%;
			background: rgba(255, 255, 255, 0.1);
			transform: rotate(25deg);
		}

		.header-content {
			position: relative;
			z-index: 1;

			.header-title {
				text-align: center;
				color: #fff;

				.main-title {
					font-size: 40rpx;
					font-weight: bold;
					display: block;
					margin-bottom: 8rpx;
					text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
				}

				.sub-title {
					font-size: 24rpx;
					opacity: 0.9;
					letter-spacing: 4rpx;
				}
			}

			.header-stats {
				margin-top: 20rpx;
				display: flex;
				justify-content: center;

				.stat-item {
					text-align: center;
					color: #fff;

					.num {
						font-size: 32rpx;
						font-weight: bold;
						display: block;
					}

					.label {
						font-size: 24rpx;
						opacity: 0.9;
					}
				}
			}
		}
	}

	.category-scroll {
		background: #fff;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
		position: sticky;
		top: 0;
		z-index: 100;

		.category-list {
			white-space: nowrap;
			padding: 0 20rpx;

			.category-item {
				display: inline-block;
				padding: 12rpx 32rpx;
				margin-right: 20rpx;
				font-size: 28rpx;
				color: #666;
				background: #f5f5f5;
				border-radius: 32rpx;
				transition: all 0.3s;

				&:last-child {
					margin-right: 0;
				}

				&.active {
					color: #fff;
					background: #4caf50;
					box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);
				}

				&:active {
					transform: scale(0.95);
				}
			}
		}
	}

	.products-grid {
		padding: 0 20rpx;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;

		.product-item {
			.product-card {
				background: #fff;
				border-radius: 16rpx;
				overflow: hidden;
				box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
				position: relative;
				transition: all 0.3s;

				&:active {
					transform: scale(0.98);
					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
				}

				.image-wrapper {
					position: relative;
					width: 100%;
					height: 340rpx;
					overflow: hidden;

					&::after {
						content: "";
						position: absolute;
						bottom: 0;
						left: 0;
						right: 0;
						height: 60rpx;
						background: linear-gradient(to top, rgba(0, 0, 0, 0.05), transparent);
					}

					.product-image {
						width: 100%;
						height: 100%;
						background: #fafafa;
						transition: transform 0.3s;

						&:active {
							transform: scale(1.05);
						}
					}
				}

				.product-tag {
					position: absolute;
					top: 16rpx;
					right: 16rpx;
					background: #ff4400;
					color: #fff;
					font-size: 24rpx;
					padding: 6rpx 16rpx;
					border-radius: 8rpx;
					box-shadow: 0 2rpx 8rpx rgba(255, 68, 0, 0.3);
				}

				.product-info {
					padding: 24rpx;

					.product-name {
						font-size: 28rpx;
						color: #333;
						display: block;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-bottom: 16rpx;
						font-weight: 500;
					}

					.price-row {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.price {
							color: #ff4400;
							font-size: 52rpx;
							font-weight: bold;
							line-height: 1;

							&::before {
								content: "¥";
								font-size: 28rpx;
								margin-right: 2rpx;
								font-weight: normal;
							}
						}

						.stock-info {
							font-size: 24rpx;
							color: #999;
							background: #f5f5f5;
							padding: 4rpx 12rpx;
							border-radius: 20rpx;
						}
					}
				}
			}
		}
	}
}
</style>
